<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <!-- 最顶部 -->
    <div class="roof"></div>
    <!-- 头部 -->
    <div class="h-top"></div>
    <!-- 广告图 -->
    <div class="login">
        <div class="container">
            <div class="login-box">
                <div class="login-tabs">
                    <li class="login-account">
                        账号登录
                    </li>
                    <li class="login-wx">
                        微信登录
                        <img class="wxqr" src="//img02.hua.com/pc/assets/img/pc_login_qr.png" alt="">
                    </li>
                </div>
                <!-- 账号登录 -->
                <div id="form1">
                    <a href="" class="toggle-opt">
                        手机验证码登录
                    </a>
                    <div class="input-box" id="un">
                        <input id="UserName" name="UserName" type="text" placeholder="请输入手机号/邮箱">
                    </div>
                    <p class="tips"></p>
                    <div class="input-box" id="pw">
                        <input id="password" name="UserName" type="password" placeholder="请输入密码">
                    </div>
                    <p class="hint"></p>
                    <input class="form-btn login-btn" type="button" id="dosubmit" value="登录">
                    <div class="form-tip">
                        <a class="pwd-forget" href="/Member/Password/Forgot">忘记密码？</a>
                    </div>
                </div>
                <div class="bottom-box">
                    <ul class="other-login-ways">
                        <li class="login-qq">
                            <a href="">
                                <span>QQ</span>
                            </a>
                        </li>
                        <li class="login-qq">
                            <a href="">
                                <span>支付宝</span>
                            </a>
                        </li>
                        <li class="register">
                            <a href="./enroll.html">
                                <span>注册账号 ></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部导航 -->
    <div class="ft-nav"></div>
    <!-- 通用尾部 -->
    <footer class="foot"></footer>
</body>
<script src="./libs/jquery.2.2.4.js"></script>
<script>

    // 注册
    $("#dosubmit").click(function () {
        if ($("#UserName").val() !== "") {
            if ($("#password" !== "")) {
                $.ajax({
                    url: "http://localhost:3000/api",
                    data: {
                        type: "login",
                        username: $("#UserName").val(),
                        password: $("#password").val(),
                    },
                    success: res => {
                        res = JSON.parse(res);
                        console.log(res);
                        if (res.code === 0) {
                            $(".hint").html("密码错误，请检查后重新输入密码")
                            $("#password").val("")
                            $("#password")[0].focus();
                        } else if (res.code === 1) {
                            if (confirm("登录成功")) {
                                location.href = "./flower.html"
                            }
                            localStorage.setItem("isLogin", "OK")
                            localStorage.setItem("username", res.data)
                        } else if (res.code === 2) {
                            $(".tips").html("用户名不存在，检查后重新输入用户名")
                            $("#UserName").val("")
                            $("#UserName")[0].focus();
                        }
                    }
                })
            } else {
                $(".hint").html("请输入密码")
                $(".hint").css({ color: "red" })
                $("#pw").css({ border: "1px solid red" })
            }
        } else {
            // 账号错误提示
            $(".tips").html("请输入手机号")
            $(".tips").css({ color: "red " })
            $("#un").css({ border: "1px solid red" })
        }
    })
    $("#UserName").on("blur", function () {
        $(".tips").html("")
    })
</script>
<script>
    $(".foot").load("http://localhost:3000/html/Common_style.html .foot")
    $(".ft-nav").load("http://localhost:3000/html/Common_style.html .footer-nav")
    $(".roof").load("http://localhost:3000/html/Common_style.html .site-nav")
    $(".h-top").load("http://localhost:3000/html/Common_style.html .h-top")
</script>

</html>